<template>
		<div class="util">
		  <el-button type="primary" plain :icon="Notice" @click="add" 
		  style="width: 150px;margin-left: 1.5%;">发布新公告</el-button>
		  <el-input type="text" placeholder="请输入标题" 
		  v-model="input"
		  style="width: 200px;height: 35px;margin-top: 20px;
		  margin-bottom: 20px;margin-left: 60%;"/>
		  <el-button 
		  :icon="Search" 
		  style="margin-left: 5px;margin-bottom: 8px;" 
		  circle
		   @click="search"/>
		</div>
		<div style="margin-left: 5%;margin-bottom: 15px;">
			<el-dialog 
			v-model="showDialog" 
			:title="dialog.title">
				<Add v-if="showDialog" 
				v-model:show="dialog.show" 
				:id="dialog.id" />
			</el-dialog>
		</div>
		<div class="main">
			<el-table
			    :data="tableData.records"
				:model="gonggao"
				:header-cell-style="{background:'#F3F4F7',color:'#555',}"
			    style="width: 100%;"
				height="400"
			  >
				  <el-table-column  property="createTime" label="发布时间" align="center" width="180px" />
				  <el-table-column v-model="gonggao.title" property="title" label="公告标题" align="center" />
				  <el-table-column v-model="gonggao.content" property="content" label="公告内容" align="center" width="100px">
					<template #default="scope" align="center">
					    <el-popover effect="light" trigger="hover" placement="top" width="auto" align="center">
					      <template #default>
					        <div>公告内容 {{ scope.row.content }}</div>
					      </template>
					      <template #reference >
					        <el-tag>查看详情</el-tag>
					      </template>
					    </el-popover>
					</template>
				  </el-table-column>
				  <el-table-column property="statue"  label="状态" align="center"  width="100px">
				  	<template #default="scope">
						<el-tag type="success" v-if="scope.row.status===1">启用中</el-tag>
						<el-tag type="danger" v-else>已结束</el-tag>
					  </template>
					</el-table-column>
				  <el-table-column property="operation" label="操作" align="center"  width="150px">
				  	<template #default="scope">
						 {{ console.log("row data:", scope.row.status) }} <!-- 调试 -->
						<template v-if="scope.row.status==1">
							<el-button
							size="small" 
							type="success"
							plain 
							@click="update(scope.row.id)">
							修改
							</el-button>
							<el-button
							size="small"
							type="danger"
							plain
							@click="del(scope.row.id,scope.row.status,0)"
							>
							删除
							</el-button>
						</template>
						<el-button 
						v-else 
						type="warning"
						plain size="small"
						@click="del(scope.row.id,scope.row.status,1)">
						重启</el-button>
				  	</template>
				  </el-table-column>
				  <el-table-column property="view" label="浏览量" align="center"  width="100px">
				  </el-table-column>
			</el-table>
			<el-pagination
						background
						:page-count="tableData.pages"
						v-model:current-page="params.page"
						:total="tableData.total"
						:close-on-click-modal="false"
						@current-change="getTableData()"
						style="margin-top:15px;"></el-pagination>
		</div>
		
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Notice from '@/components/icons/CommunityIcon/notice'
import Search from '@/components/icons/CommunityIcon/Search'
import Add from './add'
import { _axios,get, post } from '@/plugins/axios'
import url from './util'
import  { ElMessage, ElMessageBox } from 'element-plus'

const visible = ref(false)
const input = ref('')
const emits = defineEmits(['update:show', 'getTableData'])
const showDialog=ref(false)
const formObj = null//删除的时候没有表单校验，所以给一个默认值
const dialog = reactive({
	show: false,
	title: '',
	id: null
})
const gonggao=reactive({
	id:null,
	createTime:'',
	title:'',
	content:'',
	status:null,
	view:'',
	//pageviewId: null,
})
const pageview=reactive({
	id:null,
	userId:null,
	noticeId:null,
	status:''
})

const tableData = reactive({
	  records: [] ,// 初始化为空数组
	  pages: 0,
	  total: 0
	});
	const params = reactive({
	    page: 1,
	    limit: 7
	})
getTableData()
function getTableData(){
	post('/notice/list2',{pageNo:params.page, pageSize:params.limit },content=>{
			tableData.records = content.records
		    tableData.pages = content.pages
		    tableData.total = content.total			
			})
	}	
	 //添加公告
	 function add() {
		 showDialog.value=true
	 	dialog.title = '新建公告'
	 	dialog.id = null
	   dialog.show = true
	   getTableData()
	 }
	 //修改
	 function update(id) {
		showDialog.value=true
	 	dialog.title = '修改公告'
	 	dialog.id = id
	 	dialog.show = true
		getTableData()
	 }
	 
	 //删除
	 const del = (id,statue,statu) =>  {
		 console.dir(id)
		 const text=statue==1?'确定要结束该公告吗？':'确定要重启该公告吗？'
	 	ElMessageBox.confirm(
	 	   text,'提示',
	 	    {
	 	      confirmButtonText: '确定',
	 	      cancelButtonText: '取消',
	 	      type: 'warning',
	 	    }
	 	  ).then(() => {
			  post(url.del, { id,status,statu}, content => {
			  	getTableData()
			  },formObj)
	 	    }).catch(() => {
	 	      ElMessage({
	 	        type: 'info',
	 	        message: '取消删除',
	 	      })
	 	})
}
const search=()=>{
 	console.dir(input.value)
 	post(url.search, {input:input.value,pageNo:params.page, pageSize:params.limit}, content => {
		console.dir(content.records)
		tableData.records=content.records
		console.dir(tableData.records)
 	},formObj)
}
// const tableData = ref([])
// _axios.request({//解决跨域问题
// 	url:'/notice/list',
// 	method:'get'
// }).then(response=>{
// 	console.dir(response)
// 	tableData.value=response.data.map(gonggao=>{
// 		if(gonggao.time && typeof gonggao.time==='string'){
// 			gonggao.time=gonggao.time.replace('T',' ');
// 		}gonggao.pageviewId = pageview.id // 设置 pageviewId
// 		return gonggao
// 	}).filter(gonggao => gonggao.statue !== -1); // 筛选出 statue 不等于 -1 的数据
// }).catch(error => {
//   console.error("An error occurred:", error);
// });


// getTableData()
// function getTableData () {
// 	_axios.request({//解决跨域问题
// 		url:'/notice/list',
// 		method:'get'
// 	}).then(response=>{
// 		tableData.value=response.data.map(gonggao=>{
// 		if(gonggao.time && typeof gonggao.time==='string'){
// 			gonggao.time=gonggao.time.replace('T',' ');
// 		}return gonggao
// 	}).filter(gonggao => gonggao.statue !== -1); // 筛选出 statue 不等于 -1 的数据
// 	})
// }
</script>

<style scoped>
	.el-button{
		margin-top: 10px;
		margin-left: 5%;
	}
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.add-button{
			margin-left: 20px;
			margin-right: 809px;
		}
		span{
			font-size: 14px;
			margin-left: 20px;
		}
	}
	.main{
		width: 100%;
		padding: 15px;
		height: 580px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 2px 0px 10px rgba(0,0,0,0.2);
		overflow: hidden;
	}
</style>